<template>
  <div class="dialog-box">
    <el-dialog
      :title="title"
      :visible.sync="isShowDialog"
      width="520px"
      :modal="false"
      :close-on-click-modal="false"
    >
      <slot></slot>
      <div class="btns">
        <div class="btn cancel" @click="isShowDialog = false">取消</div>
        <div class="btn save" :class="{'redType':colorType}" @click="save">{{lastText}}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "mydialog",
  props: {
    title: {
      type: String,
      default() {
        return "提示";
      }
    },
    lastText: {
      type: String,
      default() {
        return "保存";
      }
    },
    colorType: {
      type: Boolean, //true 红色 反之绿色
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      isShowDialog: false
    };
  },
  methods: {
    save() {
      this.$emit("saveHandle");
    },
    show() {
      this.isShowDialog = true;
    },
    hide() {
      this.isShowDialog = false;
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.dialog-box {
  /deep/.el-dialog {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #e6e6e6;
  }
  .btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 36px;
    .btn {
      width: 100px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 2px;
      font-size: 14px;
      cursor: pointer;
    }
    .cancel {
      color: #333333;
      background: #e8e8e8;
      margin-right: 30px;
    }
    .save {
      color: #fff;
      background: #07c97d;
    }
    .redType {
      background: #fe6972;
    }
  }
}
</style>
